<template>
  <view class="caryPay u-skeleton" v-if="list">
    <u-navbar title="极客闪卡" :background="{
    'backgroundColor': '#fff'
  }" :borderBottom="false" class="u-skeleton-rect"></u-navbar>
    <view class="box">
      <view class="item" v-for="(item, index) in list" :key="index">
        <image :src="$util.img(item.image)" mode="widthFix" class="left"></image>
        <view class="right">
          <view class="title">{{ item.name }}</view>
          <view class="num">剩余:{{ item.num }}</view>
        </view>
      </view>
    </view>
    <u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
  </view>
</template>
<script>
export default {
  data() {
    return {
      // 首次进入加载
      loding: false,
      list: null
    }
  },
  onShow() {
    this.getinfo();
  },
  methods: {
    //页面数据
    getinfo() {
      this.$http.asyncSendrequest({
        url: '/order/sellList',
        success: res => {
          this.list = res.data;
          this.loding = false;
        }
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.caryPay {
  .box {
    margin: 30rpx;
    height: calc(100vh - 160rpx);
    border-radius: 10rpx;
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 48%;
      height: 100rpx;
      padding: 10rpx 20rpx;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 26rpx 30rpx 0;
      background: #fff;

      .left {
        width: 60rpx;

        image {
          width: 60rpx;
        }
      }

      .right {
        width: calc(100% - 80rpx);

        .title {
          font-size: 26rpx;
          font-weight: bold;
          width: 80%;
          overflow: hidden;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .num {
          font-size: 26rpx;
          color: rgba(0, 0, 0, .4);
          margin-top: 10rpx;
        }
      }
    }

    .item:nth-child(2n) {
      margin-right: 0;
    }
  }
}
</style>